/*
测试原生 setState(cb) 机理，同步异步，连续调用多种情形
*/

import React, { useState, useCallback } from 'react';
import styles from './set_state_multi.css';

let renderCount = 0;
export default function() {
  console.log(++renderCount);
  const [value, set] = useState({ a: 1 });
  const setOnce = useCallback(() => {
    set(v => ({ ...value, a: v.a + 1 }));
  }, []);
  const setMulti = useCallback(() => {
    set(v => ({ ...value, a: v.a + 1 }));
    set(v => ({ ...value, a: v.a + 1 })); // 证明第二次 set fn(入参) 不是 state，而是最新的 nextState；并且不会引发重复渲染
    setTimeout(() => set(v => ({ ...value, a: v.a + 1 })), 500); // 异步中 set 会引发重新渲染，但是能拿到最新的值
    setTimeout(() => set(v => ({ ...value, a: v.a + 1 })), 1000); // 异步中 set 会引发重新渲染，但是能拿到最新的值
  }, []);
  return (
    <div className={styles.normal}>
      <h1>Page set_state_multi</h1>
      <div> value = {value.a}</div>
      <button onClick={setOnce}>set once</button>
      <button onClick={setMulti}>set multi</button>
    </div>
  );
}
